<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实现常见的技术产品官网的页面架构及样式布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header id="header">
        <div class="header-left">
            <div class="logo-wrapper">
                <img src="images/site-pic.png" alt="">
            </div>
            <h3 class="logo-text">小世界</h3>
        </div>
        <div class="header-right">
            <ul class="header-nav">
                <li>首页</li>
                <li>最新活动</li>
                <li>项目介绍</li>
                <li>爱心社区</li>
                <li>关于我们</li>
                <li>
                    <div class="head-wrapper login-item">
                        <img src="" alt="">
                    </div>
                    <div class="login login-item">
                        <a href="#">登录</a>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <div class="first-part">
        <div class="f-container">
            <h1>Time of new life</h1>
            <p>新时代,年轻的人们让我们<br/>体验新生活,享受新生活</p>
            <div class="start-btn">开始体验</div>
        </div>
    </div>

    <div class="second-part">
        <div class="s-item">
            <div class="s-item-icon"><img src="images/second-icon-1.jpg" alt=""></div>
            <div class="s-item-text">打造全新世界观，让你更爱你的生活</div>
        </div>
        <div class="s-item">
            <div class="s-item-icon"><img src="images/second-icon-2.jpg" alt=""></div>
            <div class="s-item-text">丰富多彩的公益活动，发挥新世界的主人公意识</div>
        </div>
        <div class="s-item">
            <div class="s-item-icon"><img src="images/second-icon-3.jpg" alt=""></div>
            <div class="s-item-text">时尚的新理念，超前体验未知的生活</div>
        </div>
        <div class="s-item">
            <div class="s-item-icon"><img src="images/second-icon-4.jpg" alt=""></div>
            <div class="s-item-text">完善的培养机制，培养你全新的世界观</div>
        </div>
    </div>
    
    <div class="third-part">
        <div class="t-container1">
            <div><img src="images/t-site-pic.png" alt=""></div>
            <div>关于新世界,你不知道的还有什么?</div>
        </div>
        <div class="t-container2">
            <p>查找新世界城市活动信息</p>
            <p>每个城市的有不同的活动信息,请自主查询您所需要了解的城市</p>
            <div>
                <select name="" id=""></select>
                <select name="" id=""></select>
                <select name="" id=""></select>
                <div>搜搜</div>
            </div>
        </div>
    </div>

    <div class="fourth-part">
        <ul class="f-list">
            <li>
                <div><img src="images/f-item-activity1.jpg" alt=""></div>
                <h3>北京活动</h3>
                <p>新社区大联盟</p>
            </li>
            <li>
                <h2>上海活动</h2>
                <p>夜上海新景观探索</p>
                <div><img src="images/f-item-activity2.jpg" alt=""></div>
            </li>
            <li>
                <div>
                    <img src="images/f-item-activity3.jpg" alt="">
                </div>
                <h3>深圳活动</h3>
                <p>全新海岸线观点站</p>
            </li>
            <li>
                <div>
                    <img src="images/f-item-activity4.jpg" alt="">
                </div>
                <h2>香港活动</h2>
                <p>奢侈消费大派送</p>
            </li>
        </ul>
    </div>

    <div class="fifth-part">
        <div class="fifth-container1">
            <div class="fifth-container1-left">
                <h3>新世界</h3>
                <h1>TIME</h1>
                <p>@新世界－北京</p>
                <p>2017.03.17</p>
            </div>
            <div class="fifth-container1-right">
                
            </div>
        </div>
        <div class="fifth-container2">
            <div class="fifth-container2-left">
                <h3>新时代</h3>
                <p>关于爱生活的我们</p>
                <div>查看更多</div>
            </div>
            <div class="fifth-container2-mid">
                <h3>新时代</h3>
                <p>关于爱生活的我们</p>
                <div>查看更多</div>
            </div>
            <div class="fifth-container2-right">
                
            </div>
        </div>
    </div>

    <div class="six-part">
        <div></div>
        <div>
            <div>
                <div>
                    <h3>新世界志愿者协议</h3>
                    <p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法规，并且本着平等资源的原则 ......</p>
                </div>
                <div>
                    <h3>新世界志愿者权利</h3>
                    <p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在四新世界活动的优先参与资格</p>
                </div>
                <div>
                    <h3>更多条款</h3>
                </div>
            </div>
            <div>
                <form>aaaa</form>
            </div>
        </div>
    </div>
</body>
</html>